import { MaterialIcons } from '@expo/vector-icons';
import React, { useEffect, useRef } from 'react';
import { Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

interface AnimatedBottomSheetProps {
  /** 是否显示底部弹出层 */
  visible: boolean;
  /** 弹出层标题 */
  title: string;
  /** 弹出层内容 */
  children: React.ReactNode;
  /** 取消按钮点击回调 */
  onCancel: () => void;
  /** 确认按钮点击回调 */
  onConfirm?: () => void;
  /** 确认按钮文本，默认为"确定" */
  confirmText?: string;
  /** 取消按钮文本，默认为"取消" */
  cancelText?: string;
  /** 是否显示确认按钮，默认为true */
  showConfirmButton?: boolean;
}

/**
 * 通用的动画底部弹出层组件
 * 提供统一的动画效果和样式
 */
export default function AnimatedBottomSheet({
  visible,
  title,
  children,
  onCancel,
  onConfirm,
  confirmText = '确定',
  cancelText = '取消',
  showConfirmButton = true,
}: AnimatedBottomSheetProps) {
  const insets = useSafeAreaInsets();
  const translateY = useRef(new Animated.Value(300)).current;

  /**
   * 显示底部弹出层动画
   */
  const showBottomSheet = React.useCallback(() => {
    Animated.timing(translateY, {
      toValue: 0,
      duration: 300,
      useNativeDriver: true,
    }).start();
  }, [translateY]);

  /**
   * 隐藏底部弹出层动画
   */
  const hideBottomSheet = React.useCallback(() => {
    Animated.timing(translateY, {
      toValue: 300,
      duration: 300,
      useNativeDriver: true,
    }).start();
  }, [translateY]);

  // 监听 visible 状态变化，执行相应动画
  useEffect(() => {
    if (visible) {
      showBottomSheet();
    } else {
      hideBottomSheet();
    }
  }, [visible, showBottomSheet, hideBottomSheet]);

  if (!visible) {
    return null;
  }

  return (
    <Animated.View
      style={[
        styles.bottomSheet,
        {
          transform: [{ translateY }],
          zIndex: 10000,
          paddingBottom: Math.max(insets.bottom, 20),
        },
      ]}
    >
      {/* 拖拽手柄 */}
      <View style={styles.bottomSheetHandle} />

      {/* 头部区域 */}
      <View style={styles.bottomSheetHeader}>
        <TouchableOpacity
          style={styles.bottomSheetHeaderBtn}
          onPress={onCancel}
        >
          <MaterialIcons name="close" size={24} color="#666" />
          <Text style={styles.cancelText}>{cancelText}</Text>
        </TouchableOpacity>

        <Text style={styles.bottomSheetTitle}>{title}</Text>

        {showConfirmButton && (
          <TouchableOpacity
            style={styles.bottomSheetHeaderBtn}
            onPress={onConfirm}
          >
            <MaterialIcons name="check" size={24} color="#3B82F6" />
            <Text style={styles.confirmText}>{confirmText}</Text>
          </TouchableOpacity>
        )}
        
        {!showConfirmButton && <View style={styles.bottomSheetHeaderBtn} />}
      </View>

      {/* 内容区域 */}
      <View style={styles.bottomSheetContent}>
        {children}
      </View>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  bottomSheet: {
    backgroundColor: '#fff',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    padding: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 5,
    height: 280,
  },
  bottomSheetHandle: {
    width: 40,
    height: 4,
    backgroundColor: '#ddd',
    borderRadius: 2,
    marginBottom: 8,
    alignSelf: 'center',
  },
  bottomSheetHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingBottom: 8,
    borderBottomWidth: 1,
    borderColor: '#eee',
  },
  bottomSheetTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#222',
    flex: 1,
    textAlign: 'center',
  },
  bottomSheetHeaderBtn: {
    padding: 8,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  cancelText: {
    color: '#666',
  },
  confirmText: {
    color: '#3B82F6',
  },
  bottomSheetContent: {
    flex: 1,
  },
});